<template>
  <view class="page">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-bar-left">
        <view class="nav-icon" @click="handleBack">
          <uni-icons type="left" size="20" color="#333"/>
        </view>
        <view class="nav-icon" @click="goToHome">
          <uni-icons type="home" size="20" color="#333"/>
        </view>
      </view>
      <view class="nav-bar-title">
        订单详情
      </view>
    </view>

    <!-- 订单状态 -->
    <view class="status-card">
      <view class="status-title">{{ getStatusText(orderInfo.status) }}</view>
      <view class="status-desc">{{ getStatusDesc(orderInfo.status) }}</view>
      <view class="countdown" v-if="orderInfo.status === 0 && remainingTime > 0">
        支付剩余时间：{{ countdown }}
        <view class="progress-bar">
          <view class="progress" :style="{width: progressWidth}"></view>
        </view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="info-card">
      <view class="section-title">订单信息</view>
      
      <view class="info-row">
        <text class="label">医生姓名</text>
        <text class="value">{{ orderInfo.doctorName }}</text>
      </view>
      
      <view class="info-row">
        <text class="label">科室</text>
        <text class="value">{{ orderInfo.deptName }}</text>
      </view>
      
      <view class="info-row">
        <text class="label">诊室名称</text>
        <text class="value">{{ orderInfo.deptSubName || '暂无' }}</text>
      </view>
      
      <view class="info-row">
        <text class="label">就诊日期</text>
        <text class="value">{{ orderInfo.appointmentDate }}</text>
      </view>
      
      <view class="info-row">
        <text class="label">就诊时间</text>
        <text class="value">{{ orderInfo.timeSlot }}</text>
      </view>
      
      <view class="info-row">
        <text class="label">就诊方式</text>
        <text class="value">{{ orderInfo.visitType }}</text>
      </view>
      
      <view class="info-row">
        <text class="label">订单编号</text>
        <text class="value">{{ orderInfo.orderNo }}</text>
      </view>
      
      <view class="info-row">
        <text class="label">创建时间</text>
        <text class="value">{{ formatDateTime(orderInfo.createTime) }}</text>
      </view>
      
      <view class="info-row">
        <text class="label">支付时间</text>
        <text class="value">{{ orderInfo.status === 2 ? '订单已取消' : (orderInfo.payTime ? formatDateTime(orderInfo.payTime) : '暂未支付') }}</text>
      </view>
      
      <view class="info-row highlight">
        <text class="label">支付金额</text>
        <text class="value price">¥{{ orderInfo.amount }}</text>
      </view>
    </view>
    
    <!-- 在线问诊提示卡 -->
    <view class="clinic-card" v-if="orderInfo.status === 1 && isOnlineVisit">
      <view class="section-title">诊室入口</view>
      <view class="clinic-info">
        <uni-icons type="videocam" size="36" color="#2979ff" v-if="orderInfo.visitType === '视频问诊'"/>
        <uni-icons type="chat" size="36" color="#2979ff" v-if="orderInfo.visitType === '图文问诊'"/>
        <view class="clinic-text">
          <text class="clinic-title">{{ getClinicTitle }}</text>
          <text class="clinic-desc">{{ getClinicDesc }}</text>
        </view>
        <button class="enter-btn" @click="navigateToOnlineRoom">进入</button>
      </view>
    </view>
    
    <!-- 就诊二维码 -->
    <view class="qrcode-card" v-if="orderInfo.status === 1 && orderInfo.visitType === '门诊就医'">
      <view class="section-title">就诊凭证</view>
      <view class="qrcode-container">
        <image class="qrcode" src="/static/images/qrcode_placeholder.png" mode="aspectFit" />
        <view class="qrcode-tip">请在医院自助机扫码或出示给工作人员</view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <!-- 待支付状态 -->
      <block v-if="orderInfo.status === 0 && remainingTime > 0">
        <button class="btn primary-btn" @click="handlePay">立即支付</button>
        <button class="btn secondary-btn" @click="handleCancel">取消订单</button>
      </block>
      
      <!-- 订单已过期 -->
      <block v-if="orderInfo.status === 0 && remainingTime <= 0">
        <button class="btn secondary-btn" disabled>订单已过期</button>
        <button class="btn primary-btn" @click="handleRebook">重新预约</button>
      </block>
      
      <!-- 已支付状态 -->
      <block v-if="orderInfo.status === 1">
        <button class="btn primary-btn" @click="navigateToOnlineRoom" v-if="isOnlineVisit">进入诊室</button>
        <button class="btn secondary-btn" @click="handleRefund">申请退款</button>
      </block>
      
      <!-- 已取消状态 -->
      <block v-if="orderInfo.status === 2">
        <button class="btn primary-btn" @click="handleRebook">重新预约</button>
      </block>
      
      <!-- 已完成状态 -->
      <block v-if="orderInfo.status === 3">
        <button class="btn primary-btn" @click="handleComment">评价医生</button>
        <button class="btn secondary-btn" @click="handleRebook">再次预约</button>
      </block>
      
      <!-- 退款中状态 -->
      <block v-if="orderInfo.status === 4">
        <button class="btn secondary-btn" disabled>正在退款</button>
      </block>
      
      <!-- 已退款状态 -->
      <block v-if="orderInfo.status === 5">
        <button class="btn primary-btn" @click="handleRebook">重新预约</button>
      </block>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { apiBaseUrl } from '../../../config/api'
declare const uni: any;
declare const getCurrentPages: () => any[];

// 订单信息
const orderInfo = ref({
  orderId: '',
  orderNo: '',
  doctorName: '',
  deptName: '',
  appointmentDate: '',
  timeSlot: '',
  visitType: '',
  amount: 0,
  status: 0,
  createTime: '',
  payTime: '',
  doctorId: '',
  expireTime: '',
  deptSubId: '',
  deptSubName: ''
})

// 倒计时
const remainingTime = ref(0)
const totalTime = ref(600) // 默认10分钟 (10 * 60)
const countdown = computed(() => {
  const minutes = Math.floor(remainingTime.value / 60)
  const seconds = remainingTime.value % 60
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
})

// 进度条宽度
const progressWidth = computed(() => {
  return `${(remainingTime.value / totalTime.value) * 100}%`
})

// 倒计时定时器
let timer: ReturnType<typeof setInterval> | null = null

// 在线问诊诊室文案
const getClinicTitle = computed(() => {
  return orderInfo.value.visitType === '视频问诊' ? '视频诊室' : '图文诊室';
})

const getClinicDesc = computed(() => {
  return orderInfo.value.visitType === '视频问诊' 
    ? `${orderInfo.value.appointmentDate} ${orderInfo.value.timeSlot}` 
    : '您可以随时发送消息咨询医生';
})

// 是否是线上问诊（视频或图文）
const isOnlineVisit = computed(() => {
  return orderInfo.value.visitType === '视频问诊' || orderInfo.value.visitType === '图文问诊'
})

// 从创建订单页面直接跳转过来
const fromCreate = ref(false)

// 时间段列表
const timeSlots = [
  '08:00~08:30', '08:30~09:00', '09:00~09:30', '09:30~10:00',
  '10:00~10:30', '10:30~11:00', '11:00~11:30', '11:30~12:00',
  '13:00~13:30', '13:30~14:00', '14:00~14:30', '14:30~15:00',
  '15:00~15:30', '15:30~16:00', '16:00~16:30'
];

// 获取订单状态文字
const getStatusText = (status) => {
  const statusMap = {
    0: '待支付',
    1: '已支付',
    2: '已取消',
    3: '已完成',
    4: '退款中',
    5: '已退款'
  }
  return statusMap[status] || '未知状态'
}

// 获取订单状态描述
const getStatusDesc = (status) => {
  const descMap = {
    0: remainingTime.value > 0 ? '请在剩余时间内完成支付，否则订单将自动取消' : '订单已超时，无法支付',
    1: '预约成功，请按时就诊',
    2: '订单已取消',
    3: '就诊已完成，感谢您的信任',
    4: '您的退款申请正在处理中',
    5: '退款已完成，金额将原路返回'
  }
  return descMap[status] || ''
}

// 获取订单详情
const getOrderDetail = async (orderId: string) => {
  try {
    uni.showLoading({
      title: '加载中'
    })
    
    const res = await uni.request({
      url: apiBaseUrl + '/patient/appointment/order/detail',
      method: 'POST',
      data: {
        orderId: orderId
      }
    })
    
    uni.hideLoading()
    
    if (res.statusCode === 200 && res.data.code === 200) {
      // 将返回的订单数据赋值给orderInfo
      const orderData = res.data.data || res.data.result
      if (orderData) {
        // 检查并转换时间段
        if (orderData.timeSlot !== undefined && orderData.timeSlot !== null) {
          orderData.timeSlot = getTimeSlotText(orderData.timeSlot);
        }
        
        // 复制获取到的订单数据到orderInfo对象
        orderInfo.value = {
          ...orderInfo.value,
          ...orderData
        }
        
        // 如果订单未支付且有过期时间，计算剩余支付时间
        if (orderInfo.value.status === 0 && orderInfo.value.expireTime) {
          calculateRemainingTime(orderInfo.value.expireTime)
          startCountdown()
        }
      } else {
        console.error('订单数据为空')
        uni.showToast({
          title: '订单数据为空',
          icon: 'none'
        })
      }
    } else {
      uni.showToast({
        title: res.data.msg || '获取订单信息失败',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.hideLoading()
    uni.showToast({
      title: '获取订单信息失败',
      icon: 'none'
    })
    console.error('获取订单详情失败:', error);
  }
}

// 将数字时间段转换为具体时间描述
const getTimeSlotText = (timeSlotIndex) => {
  // 检查是否为数字
  if (typeof timeSlotIndex === 'number' || !isNaN(Number(timeSlotIndex))) {
    const index = Number(timeSlotIndex);
    // 检查是否在合法范围内
    if (index >= 0 && index < timeSlots.length) {
      return timeSlots[index];
    }
  }
  // 如果已经是时间段文本或无法转换，则直接返回
  return timeSlotIndex;
};

// 页面加载
onLoad((options) => {
  if (options?.orderId) {
    orderInfo.value.orderId = options.orderId
    fromCreate.value = options.fromCreate === 'true'
    
    // 从URL参数中获取 doctorId 和 deptSubId 和deptSubName
    if (options.doctorId) {
      orderInfo.value.doctorId = options.doctorId
      console.log('医生ID:', options.doctorId);
    }
    if (options.deptSubId) {
      orderInfo.value.deptSubId = options.deptSubId
      console.log('诊室ID:', options.deptSubId);
    }
    if (options.deptSubName) {
      orderInfo.value.deptSubName = options.deptSubName
      console.log('诊室名称:', options.deptSubName);
    }
    

    // 打印URL参数
    console.log('页面参数:', options);
    
    // 获取订单详情
    getOrderDetail(options.orderId)
  } else {
    uni.showToast({
      title: '订单ID不存在',
      icon: 'none'
    })
    // 改用switchTab返回首页，而不是navigateBack
    setTimeout(() => {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }, 1500)
  }
})

// 页面显示
onShow(() => {
  // 如果有orderId但没有其他信息，重新获取订单详情
  if (orderInfo.value.orderId && !orderInfo.value.doctorName) {
    getOrderDetail(orderInfo.value.orderId)
  }
})

// 计算剩余支付时间
const calculateRemainingTime = (expireTimeStr) => {
  try {
    // 处理ISO格式的时间字符串
    const expireTime = new Date(expireTimeStr).getTime()
    const now = Date.now()
    
    if (now < expireTime) {
      remainingTime.value = Math.floor((expireTime - now) / 1000)
      // 设置总时间为15分钟（900秒）
      totalTime.value = 900
    } else {
      remainingTime.value = 0
    }
  } catch (error) {
    remainingTime.value = 0
  }
}

// 开始倒计时
const startCountdown = () => {
  if (timer) clearInterval(timer)
  
  if (remainingTime.value > 0) {
    timer = setInterval(() => {
      remainingTime.value--
      
      if (remainingTime.value <= 0) {
        if (timer) {
          clearInterval(timer)
          timer = null
        }
        // 订单超时，刷新页面
        getOrderDetail(orderInfo.value.orderId)
        uni.showToast({
          title: '订单已超时',
          icon: 'none'
        })
      }
    }, 1000)
  }
}

// 处理支付
const handlePay = () => {
  // 显示支付确认框
  uni.showModal({
    title: '确认支付',
    content: `需支付 ¥${orderInfo.value.amount}，是否立即支付？`,
    confirmText: '立即支付',
    cancelText: '稍后支付',
    success: async (res) => {
      if (res.confirm) {
        // 用户确认后再进行支付操作
        const useSimulatedPayment = true;
        // 现在默认使用模拟支付（useSimulatedPayment = true），如果需要切换到真实支付，只需要将 useSimulatedPayment 设置为 false 即可。
        
        if (useSimulatedPayment) {
          await mockPay();
        } else {
          await realPay();
        }
      }
    }
  })
}

// 模拟支付
const mockPay = async () => {
  try {
    uni.showLoading({
      title: '支付中'
    })
    
    // 直接调用支付成功回调
    const res = await uni.request({
      url: apiBaseUrl + '/patient/appointment/order/paySuccess/callback',
      method: 'POST',
      data: {
        orderId: orderInfo.value.orderId,
        status: 'SUCCESS',
        tradeNo: 'MOCK_' + Date.now(),
        payTime: new Date().toISOString()
      }
    })
    
    uni.hideLoading()
    
    if (res.statusCode === 200 && res.data.code === 200) {
      // 支付成功，刷新订单状态
      await getOrderDetail(orderInfo.value.orderId)
      uni.showToast({
        title: '支付成功',
        icon: 'success'
      })
    } else {
      uni.showToast({
        title: '支付失败',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.hideLoading()
    uni.showToast({
      title: '支付失败',
      icon: 'none'
    })
  }
}

// 真实微信支付
const realPay = async () => {
  try {
    uni.showLoading({
      title: '获取支付参数'
    })
    
    // 获取支付参数
    const res = await uni.request({
      url: apiBaseUrl + '/payment/wxpay/create',
      method: 'POST',
      data: {
        orderId: orderInfo.value.orderId,
        totalFee: orderInfo.value.amount * 100, // 微信支付以分为单位
        body: `${orderInfo.value.doctorName}医生挂号费`,
        openId: await getOpenId()
      }
    })
    
    uni.hideLoading()
    
    if (res.statusCode === 200 && res.data.code === 200) {
      const payParams = res.data.result
      
      // 调用微信支付
      uni.requestPayment({
        ...payParams,
        timeStamp: payParams.timeStamp.toString(),
        success: async () => {
          // 支付成功，调用回调接口
          const callbackRes = await uni.request({
            url: apiBaseUrl + '/patient/appointment/order/paySuccess/callback',
            method: 'POST',
            data: {
              orderId: orderInfo.value.orderId,
              status: 'SUCCESS',
              tradeNo: `WX_${Date.now()}`
            }
          })
          
          if (callbackRes.statusCode === 200 && callbackRes.data.code === 200) {
            // 刷新订单状态
            await getOrderDetail(orderInfo.value.orderId)
            uni.showToast({
              title: '支付成功',
              icon: 'success'
            })
          }
        },
        fail: (err) => {
          if (err.errMsg !== 'requestPayment:fail cancel') {
            uni.showToast({
              title: '支付失败',
              icon: 'none'
            })
          }
        }
      })
    } else {
      uni.showToast({
        title: '获取支付参数失败',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.hideLoading()
    uni.showToast({
      title: '支付失败',
      icon: 'none'
    })
  }
}

// 获取用户openid
const getOpenId = async () => {
  const openId = uni.getStorageSync('openId')
  if (openId) {
    return openId
  }
  
  try {
    const loginRes = await uni.login()
    const res = await uni.request({
      url: apiBaseUrl + '/payment/wxpay/getOpenid',
      method: 'POST',
      data: {
        code: loginRes.code
      }
    })
    
    if (res.statusCode === 200 && res.data.code === 200) {
      const openid = res.data.result.openid
      uni.setStorageSync('openid', openid)
      return openid
    } else {
      throw new Error('获取openid失败')
    }
  } catch (error) {
    console.error('获取openid失败:', error)
    throw new Error('获取用户信息失败')
  }
}

// 取消订单
const handleCancel = async () => {
  try {
    uni.showLoading({
      title: '取消中'
    })
    
    const res = await uni.request({
      url: apiBaseUrl + '/patient/appointment/order/cancel',
      method: 'POST',
      data: {
        orderId: orderInfo.value.orderId
      }
    })
    
    uni.hideLoading()
    
    if (res.statusCode === 200 && res.data.code === 200) {
      // 取消成功，刷新订单状态
      await getOrderDetail(orderInfo.value.orderId)
      uni.showToast({
        title: '取消成功',
        icon: 'success'
      })
    } else {
      uni.showToast({
        title: '取消失败',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.hideLoading()
    uni.showToast({
      title: '取消失败',
      icon: 'none'
    })
    console.error('取消订单失败:', error)
  }
}

// 申请退款
const handleRefund = async () => {
  try {
    uni.showLoading({
      title: '申请中'
    })
    
    const res = await uni.request({
      url: apiBaseUrl + '/patient/appointment/order/refund',
      method: 'POST',
      data: {
        orderId: orderInfo.value.orderId
      }
    })
    
    uni.hideLoading()
    
    if (res.statusCode === 200 && res.data.code === 200) {
      // 申请成功，刷新订单状态
      await getOrderDetail(orderInfo.value.orderId)
      uni.showToast({
        title: '申请成功',
        icon: 'success'
      })
    } else {
      uni.showToast({
        title: '申请失败',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.hideLoading()
    uni.showToast({
      title: '申请失败',
      icon: 'none'
    })
    console.error('申请退款失败:', error)
  }
}

// 重新预约
const handleRebook = () => {
  // 获取URL参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options;
  
  // 打印URL参数
  console.log('重新预约时的URL参数:', options);
  
  // 直接使用URL参数中的deptSubId和请求后端获得的deptSubName
  uni.redirectTo({
    url: `/pages/index/Make-appointment/select-date?deptSubId=${options.deptSubId}&deptSubName=${orderInfo.value.deptSubName}`
  });
}

// 评价医生
const handleComment = () => {
  uni.navigateTo({
    url: `/pages/index/comment/comment?orderId=${orderInfo.value.orderId}`
  })
}

// 进入在线诊室
const navigateToOnlineRoom = () => {
  if (orderInfo.value.visitType === '视频问诊') {
    uni.navigateTo({
      url: `/pages/index/clinic/video?orderId=${orderInfo.value.orderId}`
    })
  } else if (orderInfo.value.visitType === '图文问诊') {
    uni.navigateTo({
      url: `/pages/index/clinic/chat?orderId=${orderInfo.value.orderId}`
    })
  }
}

// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}

// 返回主页
const goToHome = () => {
  uni.switchTab({
    url: '/pages/index/index'
  })
}

// 格式化日期时间
const formatDateTime = (dateTimeStr) => {
  if (!dateTimeStr) return '';
  
  try {
    const date = new Date(dateTimeStr);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    
    return `${year}年${month}月${day}日 ${hours}:${minutes}`;
  } catch (error) {
    console.error('日期格式化失败:', error);
    return dateTimeStr;
  }
}

onUnmounted(() => {
  // 清除定时器
  if (timer) clearInterval(timer)
})
</script>

<style>
.page {
  min-height: 100vh;
  background: #f5f8ff;
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: calc(var(--status-bar-height) + 44px + 20rpx);
}

.nav-bar {
  position: fixed;
  top: var(--status-bar-height);
  left: 0;
  right: 0;
  height: 44px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  z-index: 100;
}

.nav-bar-left {
  display: flex;
  align-items: center;
}

.nav-icon {
  width: 44rpx;
  height: 44px;
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.nav-bar-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
}

.status-card {
  margin: 20rpx;
  padding: 40rpx 30rpx;
  background: linear-gradient(135deg, #2979ff, #1a56ff);
  border-radius: 12rpx;
  text-align: center;
  color: #fff;
}

.status-title {
  font-size: 40rpx;
  font-weight: 600;
  margin-bottom: 16rpx;
}

.status-desc {
  font-size: 28rpx;
  opacity: 0.9;
  margin-bottom: 20rpx;
}

.countdown {
  font-size: 28rpx;
  font-weight: 500;
  margin-top: 20rpx;
  color: #fff;
}

.progress-bar {
  height: 6rpx;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3rpx;
  margin-top: 12rpx;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: #fff;
  transition: width 1s linear;
}

.info-card, .qrcode-card, .clinic-card {
  margin: 20rpx;
  padding: 30rpx;
  background: #fff;
  border-radius: 12rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 20rpx;
  border-left: 4rpx solid #2979ff;
  padding-left: 16rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.info-row:last-child {
  border-bottom: none;
}

.label {
  color: #666;
  font-size: 28rpx;
}

.value {
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
}

.highlight {
  padding-top: 24rpx;
}

.price {
  color: #ff5722;
  font-weight: 600;
  font-size: 32rpx;
}

.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.qrcode {
  width: 400rpx;
  height: 400rpx;
  margin-bottom: 20rpx;
}

.qrcode-tip {
  font-size: 26rpx;
  color: #666;
}

.clinic-info {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
}

.clinic-text {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
}

.clinic-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 6rpx;
}

.clinic-desc {
  font-size: 24rpx;
  color: #666;
}

.enter-btn {
  min-width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  background-color: #2979ff;
  color: #fff;
  border-radius: 30rpx;
  font-size: 26rpx;
  padding: 0 24rpx;
  margin: 0;
}

.bottom-buttons {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx;
  background: #fff;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
  display: flex;
  gap: 20rpx;
  z-index: 100;
}

.btn {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-weight: 500;
  transition: all 0.3s ease;
}

.primary-btn {
  background: linear-gradient(135deg, #2979ff, #1a56ff);
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
}

.primary-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 6rpx rgba(41, 121, 255, 0.3);
}

.secondary-btn {
  background: #fff;
  color: #666;
  border: 2rpx solid #ddd;
}

.secondary-btn:active {
  transform: translateY(2rpx);
  background: #f8f8f8;
}

.primary-btn[disabled], .secondary-btn[disabled] {
  opacity: 0.6;
  transform: none;
}

.page {
  padding-bottom: calc(env(safe-area-inset-bottom) + 128rpx);
}
</style> 